<template>
    <h2>客户投诉列表</h2>
    <el-form :inline="true" :model="condForm">
      <el-form-item label="投诉单号">
        <el-input v-model="condForm.id" />
      </el-form-item>
      <el-form-item label="问题描述">
        <el-input v-model="condForm.question" />
      </el-form-item>
  
      <br/>
      <el-form-item label="紧急程度" style="width: 22%">
        <el-select
            v-model="condForm.grade"
            placeholder="请选择....">
          <el-option label="普通" value="普通" />
          <el-option label="加急" value="加急" />
  
  
        </el-select>
      </el-form-item>
      <el-form-item label="处理状态" style="width: 22%">
        <el-select
            v-model="condForm.state"
            placeholder="请选择....">
          <el-option label="未处理" value="未处理" />
          <el-option label="已处理" value="已处理" />
          <el-option label="未回访" value="未回访" />
          <el-option label="已回访" value="已回访" />
  
        </el-select>
      </el-form-item>
      <br/>
      <el-form-item>
        <el-button type="primary" @click="subQueryAfter">查询</el-button>
  
      </el-form-item>
    </el-form>
  
    <hr/>
  
    <el-table :data="afterSaleList" stripe style="width: 100%">
      <el-table-column prop="id" label="投诉编号"/>
      <el-table-column prop="custName" label="客户姓名"/>
      <el-table-column prop="question" label="问题类型"/>
      <el-table-column prop="state" label="处理状态"/>
      <el-table-column prop="grade" label="紧急程度"/>
      <el-table-column prop="level" label="投诉满意度"/>
  
      <el-table-column fixed="right" label="操作" width="200">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="openReplyDialog(scope.row.id)">处理
          </el-button>
          <el-button link type="primary" size="small" @click="loadQuestionReplayList(scope.row)">查看处理详情
          </el-button>
        </template>
      </el-table-column>
  
    </el-table>
    <hr/>
  
    <el-pagination
        small
        background
        :page-size="3"
        :pager-count="10"
        layout="prev, pager, next"
        :total="total"
        class="mt-4" @current-change="handlerSalePageChange"/>
        <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="80%"
    
  >
  <h2>回复客户投诉</h2>
  <el-form :model="replyForm" label-width="120px" >
    <el-form-item label="回复内容">
      <el-input v-model="replyForm.content" style="width: 80%, height: 120px" type="textarea"/>
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="subReplayForm">保存</el-button>
      <el-button>取消</el-button>
    </el-form-item>

  </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
  
  <el-dialog
    v-model="dialogReplyListVisible"
 
    width="80%"
    
  >
  <h2>回复列表</h2>
<div style="text-align: left" >
 <el-text>投诉列表:{{question.custName }}</el-text><br>
  <el-text>投诉问题:{{ question.quesDesc }}</el-text>
  <el-table :data="replaysList" stripe style="width: 100%">
        <el-table-column prop="id" label="编号"/>
        <el-table-column prop="redate" label="时间"/>
        <el-table-column prop="score" label="评分"/>
        <el-table-column prop="content" label="内容"/>


      </el-table>

      <!--   分页    -->
      <hr/>

      <el-pagination
          small
          background
          :page-size="3"
          :pager-count="10"
          layout="prev, pager, next"
          :total="totalReplay"
          class="mt-4" @current-change="handlerReplayPageChange"/>
</div>

 
  </el-dialog>
  

  </template>

  
  
  <script setup>
  import {onMounted, reactive, ref} from "vue";
  import axios from "axios";
  import { ElMessage } from 'element-plus'; // 添加此行
    //数据库总记录数
    const total=ref(0)
    //声明投诉列表集合
    const afterSaleList=ref([]);
    //定义封装查询条件的表单对象
    const condForm=reactive({
      id:'',
      question:'',
      grade:'',
      level:''
    });
    //定义函数发生ajax请求
    function queryAfterSaleList(pageNum){
      condForm.pageNum=pageNum;
      axios.post("http://localhost:8081/listAfterSale", condForm)
      .then((response)=>{
        afterSaleList.value=response.data.afterSalesList;
        total.value=response.data.total;
      })
      .catch((error)=>{
        console.log(error);
  
      });
    }
    //加载视图进行调用
    onMounted(function(){
      queryAfterSaleList(1);
    });
    //定义函数提交分页请求
    function handlerSalePageChange(pageNum){
      queryAfterSaleList(pageNum);
    }
    //定义函数提交查询条件
    function subQueryAfter(){
      queryAfterSaleList(1);
    }
  const dialogVisible=ref(false);
  const replyForm=reactive({
    content:'',
    quesId:''
  });
function openReplyDialog(id){
replyForm.quesId=id;
dialogVisible.value=true;
replyForm.content='';
}

function subReplayForm(){
    axios.post("http://localhost:8081/saveReply",replyForm).
then(response=> {if(response.data.code==200){
    ElMessage(response.data.msg);
    dialogVisible.value=false;
  }
  else{
    ElMessage(response.data.msg);
  }}).catch(
  (error)=>{
    console.log(error);
  }
);
}

const dialogReplyListVisible=ref(false);
 const question=reactive({
    custName:'',
    quesDesc:''
 })


  //定义total。保存回复总记录数
  const totalReplay=ref(0);
  //定义回复列表数据
  const replaysList=ref([]);
  //声明变量保存投诉id
  let qid=0;
function loadQuestionReplayList(row){
 
dialogReplyListVisible.value=true;
question.custName=row.custName;
question.quesDesc=row.question;
qid=row.id;
    //发送ajax请求
    axios.get("http://localhost:8081/listReplay?id="+row.id)
    .then((response)=>{
      replaysList.value=response.data.replayList;
      totalReplay.value=response.data.total;
    })
    .catch((error)=>{
      console.log(error);
    })
  }

  //提交分页查询参数的请求
  function handlerReplayPageChange(pageNum){
    //发送ajax请求
    axios.get("http://localhost:8081/listReplay?id="+qid+"&pageNum="+pageNum)
        .then((response)=>{
          replaysList.value=response.data.replayList;
          totalReplay.value=response.data.total;
        })
        .catch((error)=>{
          console.log(error);
        })
  }

  </script>
  
  <style scoped>
  
  </style>